<template>
  <div class="login-box login-bg">
    <i class="icon icon-logo"></i>
    <form>
      <view class="section flex-box">
        <i class="label icon icon-user"></i>
        <input maxlength="11" class="flex-1" name="tel" v-model="tel" type="number" placeholder="请输入手机号" />
      </view>
      <view class="section flex-box">
        <i class="label icon icon-safe"></i>
        <input class="flex-1" name="imgCode" maxlength="4" v-model="imgCode" type="number" placeholder="请输入图形验证码" />
        <!-- <image class="code code-img" :src="codeImg" @tap="getImgCode" /> -->
        <canvas @tap="getImgCode" class="code code-img" canvas-id="canvas"></canvas>
      </view>
      <view class="section flex-box relative">
        <i class="label icon icon-msg"></i>
        <input class="flex-1" name="numcode" maxlength="6" v-model="numcode" type="number" placeholder="请输入短信验证码" />
        <button class="code code-btn" :loading="codeBtnLoading" @tap="getNumCode" >获取验证码</button>
        <span v-if="codeBtnLoading" class="btn-mask">{{countDown}}秒后重试</span>
      </view>
      <div class="btn-box text-center">
        <button class="btn-full" :loading="loginLoading" @tap="formSubmit">{{wxcode ? '绑定并登录' : '登录'}}</button>
        <!-- <button class="btn-light" >注册</button> -->
      </div>
    </form>
    <div v-if="!wxcode" class="wx-login text-center m-auto" @tap="wxLogin">
      <i class="icon icon-wxchat"></i>
      <p class="tint font14">微信快捷登录</p>
    </div>
  </div>
</template>

<script>
import login from '@/interface/login'
import Mcaptcha from '@/utils/Mcaptcha'
import getNumCode from '@/interface/getNumCode'
import checkNumCode from '@/interface/checkNumCode'
import dialog from '@/utils/dialog'
import valid from '@/utils/valid'
export default {
  components: {},
  data () {
    return {
      wxcode: '',
      codeBtnLoading: false,
      loginLoading: false,
      tel: '',
      numcode: '',
      realNumCode: '',
      codeImg: '',
      imgCode: '',
      realImgcode: '',
      countDown: 30
    }
  },
  methods: {
    countDownRun (fun) {
      let timer = setInterval(() => {
        if (this.countDown <= 1) {
          clearInterval(timer)
          fun && fun()
          this.countDown = 30
        }
        this.countDown--
      }, 1000)
    },
    getRandom () {
      let num = new Date().getMilliseconds() + '' + Math.floor(Math.random() * 10)
      num = num.padStart(4, 0)
      this.realImgcode = num
      return num
    },
    getImgCode () {
      this.mcaptcha.refresh(this.getRandom())
    },
    async getNumCode () {
      if (!valid.isPhone(this.tel)) { return }
      const imgCode = this.imgCode.trim()
      if (!imgCode) { return dialog.showToast('请填写图形验证码') }
      if (imgCode !== this.realImgcode) { return dialog.showToast('请填写图形验证码') }

      this.codeBtnLoading = true
      this.countDownRun(() => { this.codeBtnLoading = false })
      getNumCode({
        iphone: this.tel
      })
      // .finally(() => { this.codeBtnLoading = false })
    },
    checkNumCode () {
      return checkNumCode({
        iphone: this.tel,
        code: this.numcode
      }).catch(msg => dialog.showToast(msg || '短信验证码输入不正确'))
    },
    async formSubmit () {
      if (!valid.isPhone(this.tel)) { return }
      const imgCode = this.imgCode.trim()
      if (!imgCode) { return dialog.showToast('请填写图形验证码') }
      if (imgCode !== this.realImgcode) { return dialog.showToast('请填写图形验证码') }
      await this.checkNumCode()

      this.loginLoading = true
      const queryData = {
        tel: this.tel,
        numcode: this.numcode,
        wxcode: this.wxcode
      }
      login(queryData).then(v => {
        this.navigateBack()
      }).finally(() => { this.loginLoading = false })
    },
    wxLogin () {
      wx.login({
        success: res => {
          wx.redirectTo({
            url: `/pages/login/main?wxcode=${res.code}`
          })
        }
      })
    }
  },
  mounted () {
    this.mcaptcha = new Mcaptcha({
      el: 'canvas',
      width: 83,
      height: 26,
      code: this.getRandom()
    })
    const query = this.$root.$mp.query
    this.wxcode = query.wxcode
    this.getImgCode()
  }
}
</script>

<style lang="less">

  .login-box{
    &.login-bg{
      height: 100%;
      background-position: bottom center;
    }
    .icon-logo{
      display: block;
      width: 109px;
      height: 44px;
      margin: 0 auto;
      margin-bottom: 55px;
    }
    padding: 50px 28px 0;
    font-size: 14px;
    input, input:focus{
      line-height: 32px;
      height: 32px;
      color: #333;
    }
    .section {
      align-items: center;
      padding: 15px 0 7px;
      border-bottom: 1px solid #efefef;
      .label {
        margin-right: 14px;
      }
      .icon{
        width: 16px;
      }
      .icon-user{
        height: 18px;
      }
      .icon-safe{
        height: 17px;
      }
      .icon-msg{
        height: 16px;
      }
      .code{
        width: 83px;
        height: 26px;
        line-height: 28px;
        text-align: center;
        box-sizing:border-box;
        outline:1px solid #999;
      }
      .code-btn{
        color: #666;
        border-radius: 2px;
        font-size: 12px;
        padding:0;
      }
      .btn-mask{
        position: absolute;
        right: -1px;
        top: 17px;
        width: 85px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background-color:rgba(255, 255, 255, 0.8);
        color: #888;
        font-size: 12px;
      }
    }
    .btn-box {
      margin: 44px 0 50px;
      .btn-full{
        margin-bottom: 15px;
      }
    }
    .wx-login{
      width: 100px;
      padding: 5px 0;
      // line-height: 20px;
      // background-color: #fff;
      .icon{
        width: 26px;
        height: 26px;
        margin-bottom: 4px;
      }
    }
  }
</style>
